<template>
  <div>
    <el-menu
      style="width: 280px; font-size: 24px"
      class="el-menu-vertical-demo"
      :collapse="isCollapse"
      background-color="#2f4050"
      text-color="#a7b1c2"
      active-text-color="#ffffff"
      router
      default-active="/index/main_home"
    >
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-postcard"></i>
          <span slot="title">选题管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/index/main_home" @click="clickMenu()"
            >课题</el-menu-item
          >
          <el-menu-item index="/index/chose_title">选题</el-menu-item>
          <el-menu-item index="/index/change_title">课题信息变更</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-pie-chart"></i>
          <span slot="title">过程管理</span>
        </template>
        <el-menu-item-group>
          <el-menu-item index="/index/assig_book">任务书</el-menu-item>
          <el-menu-item index="/index/open_report">开题报告</el-menu-item>
          <el-menu-item index="/index/text">外文翻译</el-menu-item>
          <el-menu-item index="/index/text">中期检查</el-menu-item>
          <el-menu-item index="/index/text">初稿</el-menu-item>
          <el-menu-item index="/index/text">定稿</el-menu-item>
          <el-menu-item index="/index/text">指导日志</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="3">
        <template slot="title">
          <i class="el-icon-notebook-2"></i>
          <span slot="title">最终稿</span>
        </template>
        <el-menu-item-group
          ><el-menu-item index="/index/text"
            >最终稿</el-menu-item
          ></el-menu-item-group
        >
      </el-submenu>
      <el-submenu index="4">
        <template slot="title">
          <i class="el-icon-user-solid"></i>
          <span slot="title">个人中心</span>
        </template>
        <el-menu-item-group
          ><el-menu-item index="/index/text">个人信息</el-menu-item>
          <el-menu-item index="/index/text"
            >安全中心</el-menu-item
          ></el-menu-item-group
        >
      </el-submenu>
    </el-menu>
  </div>
</template>


<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}

.el-submenu__title {
  font-size: 17px !important;
  right: 40px;
}
.el-dropdown-menu__item,
.el-menu-item {
  font-size: 15px !important;
}
.el-submenu .el-menu-item {
  height: 45px !important;
  line-height: 45px !important;
}
.el-menu-item-group__title {
  padding: 0 !important;
}
.el-submenu__icon-arrow {
  font-weight: bolder !important;
  font-size: 16px !important;
}
</style>

<script>
//  :class="isActive(item.url)?'active':''"
//      :default-active="$route.path"
export default {
  data() {
    return {
      isCollapse: false,
    };
  },
  methods: {
    clickMenu(val) {
      this.$store.commit("pushtags", val);
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
  },
};
</script>